<template>
	<view class="examCard" >
		<view class="top">
			<view class="title">
				{{pracType}}
			</view>
			<view class="time">
				{{pracRecordItem.endTime}}
			</view>
			<view class="time">
				<u-button type='default' size="mini" @click="recordDetail(pracRecordItem.id)">详情</u-button>
			</view>
		</view>
		<view class="middle">
			<view class="left">
				<view class="" v-if="pracRecordItem.paperName">试卷：<text>{{pracRecordItem.paperName}}</text></view>
				<view>耗时： <text>{{pracRecordItem.time}}</text></view>
			</view>

			<view class="right">
				<view>已练习：<text>{{pracRecordItem.answerQueNum}}/{{pracRecordItem.totalQueNum}}</text></view>
				<view>得分：<text>{{pracRecordItem.score}}</text></view>
			</view>
			<u-icon class="enterArrow" name="arrow-right" color="#EEEEEE" size="28"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pracRecordItem: {
				type: [Object],
				// default: "span"
			},

		},
		data() {
			return {

			}
		},
		methods: {
			recordDetail(id) {
				this.$emit('recordClick', id);
				// this.$u.route({
				// 	url: '@/pages/exam/pracRecordDetail',
				// 	params: {
				// 		recordId: id,
				// 	}
				// });
			}
		},
		computed: {
			pracType() {
				switch (this.pracRecordItem.exerciseType) {
					case 1:
						return "模拟考试";
						break;
					case 2:
						return "知识点练习";
						break;
				}
			}
		},

		onLoad() {

		}
	}
</script>

<style lang="scss">
	.examCard {
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		margin: 10rpx;
		border-radius: 15upx;
		padding: 5rpx 0;
		color: #7f878c;
		// width: 710rpx;
		width:95%;

		.top {
			margin: 0rpx 20rpx;
			border-bottom: dashed 1px #EEEEEE;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #0080d1;
				padding: 15upx 0upx;
			}
		}

		.middle {
			margin: 10upx auto 10upx 20upx;
			font-size: 30upx;
			color: #7f878c;
			display: flex;
			justify-content: space-between;

			// background-color: #0077AA;
			.left {
				line-height: 50rpx;
				width: 280rpx;
				overflow: hidden;

				text {
					color: #0080d1;
					font-weight: bold;
				}
			}

			.right {
				line-height: 50rpx;
				display: flex;
				flex-direction: column;
				margin-left: 40rpx;

				// justify-content: space-around;
				text {
					color: #0080d1;
					font-weight: bold;
				}

				.trueRate {
					width: 200upx;
				}
			}

			.enterArrow {
				margin-left: 20upx;
			}
		}
	}
</style>
